<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="style/css.css" rel="stylesheet" type="text/css">
    <link href="style/register.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav id="nav">
    <ul>
        <li><a href="#home" class="main-link">主页</a></li>
        <li><a href="#about" class="main-link">介绍</a></li>
        <li><a href="#service" class="main-link">关于</a></li>
        <li><a href="#portfolio" class="main-link">扩展</a></li>
    </ul>
</nav>
<section id="home">
    <h1>通讯录</h1>
    <div class="container">
        <div class="form row">
            <form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="login_form" action="main.jsp?opt=login"
                  method="post">
                <h3 class="form-title">登录</h3>
                <div class="col-sm-9 col-md-9">
                    <div class="form-group">
                        <i class="fa fa-userOld fa-lg"></i>
                        <input class="form-control required" type="text" placeholder="账户名" name="id"
                               autofocus="autofocus" maxlength="20"/>
                    </div>
                    <div class="form-group">
                        <i class="fa fa-lock fa-lg"></i>
                        <input class="form-control required" type="password" placeholder="密码" name="password"
                               maxlength="8"/>
                    </div>
                    <div class="form-group">
                        <label class="checkbox">
                            <input type="checkbox" name="remember" value="1"/>记住我
                        </label>
                        <hr/>
                        <a href="#" id="register_btn" class="">没有账户？创建一个</a>
                    </div>
                    <div class="form-group">
                        <input type="submit" class="btn btn-success pull-right" value="登录"/>
                    </div>
                </div>
            </form>
        </div>

        <div class="form row">
            <form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="register_form" method="post" action="module/route.jsp?opt=register">
                <h3 class="form-title">注册</h3>
                <div class="col-sm-9 col-md-9">
                    <div class="form-group">
                        <i class="fa fa-userOld fa-lg"></i>
                        <input class="form-control required" type="text" placeholder="账户名" name="username"
                               autofocus="autofocus"/>
                    </div>
                    <div class="form-group">
                        <i class="fa fa-lock fa-lg"></i>
                        <input class="form-control required" type="password" placeholder="密码"
                               id="register_password" name="password"/>
                    </div>
                    <div class="form-group">
                        <i class="fa fa-check fa-lg"></i>
                        <input class="form-control required" type="password" placeholder="确认密码"
                               name="rpassword"/>
                    </div>
                    <div class="form-group">
                        <i class="fa fa-envelope fa-lg"></i>
                        <input class="form-control eamil" type="text" placeholder="邮箱" name="email"/>
                    </div>
                    <div class="form-group">
                        <input type="submit" class="btn btn-success pull-right" value="注册"/>
                        <input type="button" class="btn btn-info pull-left" id="back_btn" value="返回"/>
                    </div>
                </div>
            </form>
        </div>
    </div>

</section>
<section id="about">
    <p>该通讯录利用互联网实现实现通讯录网络存储和备份的服务，用户注册账号便可以创建自己独立的通讯录本。<br><br></p>
    <p>该通讯录不仅具有基本的在线增删查改的功能，而且能导出各种通讯信息数据包，提供给用户更加人性化的体验。<br><br></p>
    <p>实现思想：JavaWeb<br><br></p>
    <p>实现技术：JAVA、SQL、JSP、HTML5、CSS3、jQuery、ECMAScript、BootStrap<br><br></p>
</section>
<section id="service">
    <h1>使用说明</h1>
    <p></p>
</section>
<section id="portfolio">
    <h1>未来展望</h1>
    <ul>
        <li><a href="#work1" class="portfolio-link">移动端</a></li>
        <li><a href="#work2" class="portfolio-link">Work 2</a></li>
        <li><a href="#work3" class="portfolio-link">Work 3</a></li>
        <li><a href="#work4" class="portfolio-link">Work 4</a></li>
        <li><a href="#work5" class="portfolio-link">Work 5</a></li>
    </ul>
    <article id="work1">
        <img src="images/work1.jpg" alt="...">
        <h2>移动端</h2>
        <p>Digital advertising is a completely different animal than it was when we began. It’s not just that technology
            has changed, but the ways that brands use technology to connect with consumers has changed, as has the
            nature of the basic brand-consumer relationship. </p>
        <p>We’re fortunate that we started right in the midst of this shift, so an evolving landscape almost feels like
            home to us. </p>
    </article>
    <article id="work2">
        <img src="images/work2.jpg" alt="...">
        <h2>Work 2</h2>
        <p>Digital advertising is a completely different animal than it was when we began. It’s not just that technology
            has changed, but the ways that brands use technology to connect with consumers has changed, as has the
            nature of the basic brand-consumer relationship. </p>
        <p>We’re fortunate that we started right in the midst of this shift, so an evolving landscape almost feels like
            home to us. </p>
    </article>
    <article id="work3">
        <img src="images/work3.jpg" alt="...">
        <h2>Work 3</h2>
        <p>Digital advertising is a completely different animal than it was when we began. It’s not just that technology
            has changed, but the ways that brands use technology to connect with consumers has changed, as has the
            nature of the basic brand-consumer relationship. </p>
        <p>We’re fortunate that we started right in the midst of this shift, so an evolving landscape almost feels like
            home to us. </p>
    </article>
    <article id="work4">
        <img src="images/work4.jpg" alt="...">
        <h2>Work 4</h2>
        <p>Digital advertising is a completely different animal than it was when we began. It’s not just that technology
            has changed, but the ways that brands use technology to connect with consumers has changed, as has the
            nature of the basic brand-consumer relationship. </p>
        <p>We’re fortunate that we started right in the midst of this shift, so an evolving landscape almost feels like
            home to us. </p>
    </article>
    <article id="work5">
        <img src="images/work5.jpg" alt="...">
        <h2>Work 5</h2>
        <p>Digital advertising is a completely different animal than it was when we began. It’s not just that technology
            has changed, but the ways that brands use technology to connect with consumers has changed, as has the
            nature of the basic brand-consumer relationship. </p>
        <p>We’re fortunate that we started right in the midst of this shift, so an evolving landscape almost feels like
            home to us. </p>
    </article>
    <div id="popup">
        <div id="popup-content">
            <button id="close">Close me</button>
            <div id="popup-holder"></div>
        </div>
        <div id="popup-bg"></div>
    </div>
</section>
<div id="iealert"
     style="width:100%; background:#D35400; text-align:center; line-height:2.5; color:#fff; clear:both; position:fixed; top:0; left:0; z-index:9999; display:none;">
    您的浏览器版本较低，将影响本站点浏览效果，建议您升级浏览器到高级版本。
</div>
<script type="text/javascript">
    if (!window.localStorage) {
        document.getElementById("iealert").style.display = "block";
    }
    $(function () {
        $("#register_btn").click(function () {
            $("#register_form").show();
            $("#login_form").hide();
        });
        $("#back_btn").click(function () {
            $("#login_form").show();
            $("#register_form").hide();
        });
    });
</script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/index.js"></script>
<script src="js/register.js"></script>
</body>
</html>
